import {Button, Drawer, Space, Spin} from "antd";
import React, {useEffect, useState} from "react";
import ReactJson from 'react-json-view'
import {ImageInfoDrawerProp} from "@/pages/docker/modules";
import {useRequest} from "ahooks";
import {imagesInfo} from "@/api/docker";
import './index.less';

const ImagesInfo: React.FC<ImageInfoDrawerProp> = ({visible, imageId, close}) => {

    const [jsonObj, setJsonObj] = useState<any>({});

    const {loading, run} = useRequest(imagesInfo, {
        manual: true,
        onSuccess: (data)=> {
            setJsonObj(data);
        }
    })

    useEffect(() => {
        if (visible && imageId) {
            run(imageId)
        }
        return () => {
            setJsonObj({})
        }
    }, [visible])

    return <Drawer
        width={700}
        title="镜像详情"
        placement="right"
        onClose={close}
        open={visible}
        extra={
            <Space>
                <Button type="primary" danger onClick={close}>关闭</Button>
            </Space>
        }
    >
        <Spin spinning={loading} tip="加载中......">
            {/* https://mac-s-g.github.io/react-json-view/demo/dist/ */}
            <ReactJson
                src={jsonObj}
                theme="monokai"
                onAdd={false}
                onEdit={false}
                onDelete={false}
                indentWidth={2}
                displayDataTypes={false}
                displayObjectSize={false}
                collapseStringsAfterLength={50}
                iconStyle={'square'}
            />
        </Spin>
    </Drawer>
}


export default ImagesInfo;